<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery-2.0.3.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>	
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false&amp;libraries=geometry">
</script>

</head>
<style type="text/css">
		#map  {
					width: 100%;
			     	height: 800px;
			    	}
		</style>

<body tiles:fragment="content">
<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
			<ul class="breadcrumb">
				<li>
					<i class="fa fa-home home-icon"></i>								
					<a href='/' th:href="@{/}">Inicio</a>
				</li>
				<li class="active">Mantenimiento de Zonas</li>
			</ul><!-- .breadcrumb -->
		</div>

<h3>Draggable and Resizable Polygons</h3>

		<div class="page-content">
			<div class="page-header">
				<h1>
					Mantenimiento de Zonas
					<small>
						<i class="fa fa-angle-double-right"></i>
						Coordenadas y pol&iacute;gonos
					</small>
				</h1>
			</div><!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">						
					<div class="col-sm-11">
						<div class="col-sm-8">
							<div id="map"></div>
						</div>
						<div class="col-sm-4">
							<label for="form-field-username">Nombre de la Zona</label>				
							<div class="input-group">
								<input type="text" class="form-control" role="textbox" id="campoNombre" />
							</div>			
							<button type="button" id="btnReset" class="btn btn-sm btn-primary">
								<i class="fa fa-refresh"></i>
								Reiniciar
							</button>
							<button type="button" id="btnGrabar" class="btn btn-sm btn-primary">
								<i class="fa fa-save"></i>
								Grabar
							</button>
						</div>															
					</div>						
				</div>	
			</div>					
		</div><!-- /.page-content -->
		<form style="display: hidden" th:action="@{/mantenerZonas}" method="POST" id="formSubmit">
		 	  <input type="hidden" id="submitNombre" name="nombreZona" value=""/>
			  <input type="hidden" id="submitPuntos" name="puntos" value=""/>							  
		</form>
		<table th:each="zona : ${zonas}" name="tablaZonas" th:id="${zona.nombre}" style="visibility: hidden;">
		  <tr th:each="punto : ${zona.puntosPoligono}"> 
		    <td th:text="${punto.latitud}"></td>
		    <td th:text="${punto.longitud}"></td>
		  </tr>
		</table>
		<style type="text/css">
		#map  {
					width: 100%;
			     	height: 800px;
			    	}
		</style>
		
		
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.2&amp;sensor=false&amp;channel=PE-MAPS&amp;language=es&amp;components=country:PE&amp;libraries=places"></script>
		
<!-- 		<script src="../../static/maps/polygon.js" th:src="@{/static/maps/polygon.js}" ></script> -->
				

<table id="desc" style="visibility: hidden;">
<tr><td id="report"></td></tr>
</table>


<script type="text/javascript">
//<![CDATA[

/** COPYRIGHT NOTICE

This code is available for a fee.

Please contact me at wolfpil@gmail.com

*/

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 p;4 7;4 q=[];4 F=D;4 H;4 I;9 Q(b,c){4 g=t.u;4 d={18:\'M -1,-0.5 0,-1 1,-0.5 1,0.5 0,1 -1,0.5 z\',R:\'#19\',S:1,T:\'#1w\',U:1,1a:6};4 f={18:\'M -1,-0.5 0,-1 1,-0.5 1,0.5  0,1 -1,0.5 z\',R:\'#19\',S:1,T:\'#1x\',U:0.5,1a:8};4 h=E g.1y({1z:b,p:p,1A:d,1B:D,V:J});l(c)q.1b(c,0,h);1c q.1C(h);g.o.y(h,"1D",9(){h.1d(f)});g.o.y(h,"1E",9(){h.1d(d)});g.o.y(h,"1F",9(e){A(4 m=0,r;r=q[m];m++){l(r==h){4 a=e.B;1e}}7.x().1f(m,a);K()});g.o.y(h,"1g",9(){A(4 n=0,s;s=q[n];n++){l(s==h){s.L(G);q.1b(n,1);1e}}7.x().1G(n);K()});W h}9 X(a){l(F){4 b=a.B;4 c=7.x();A(4 i=0,n;n=I[i];i++){4 d=n.Y()+b.Y()-H.Y();4 e=n.Z()+b.Z()-H.Z();4 f=E t.u.1h(d,e);c.1f(i,f)}}}9 1i(a){4 g=t.u;F=J;H=a.B;I=[];A(4 i=0,n;n=q[i];i++){I[i]=n.1H();g.o.1j(n);n.L(G)}q.v=0;p.1k(\'V\',D);g.o.y(p,"10",X);l(11.o){11.o.1I=D}a.1J()}9 1l(){l(F){F=D;p.1k(\'V\',J);t.u.o.1K(p,"10");4 a=7.x();A(4 i=0;i<a.12();i++){Q(a.N(i))}}}9 13(){4 g=t.u;4 a={R:"#1L",1M:.8,S:3,T:"#1N",U:.2,p:p};7=E g.1O(a);7.1m=[g.o.y(7,"1P",1i),g.o.y(7,"10",X)];O.1Q=1l}9 K(){4 a=O.14("1n");4 g=t.u.1o.1p;4 b=7.x().1R();4 c=g.1S(b,1T);l(q.v<=2){a.15="&1q;"}1c l(q.v>2){a.15=c.1U(3)+" 1V&1W;"}}9 1r(d){4 g=t.u.1o.1p;4 e=7.x(),v=e.12(),C=[];l(v<=2)W(v+1);A(4 i=0;i<v;i++){4 f=e.N(i);4 h=e.N(i+1)||e.N(0);4 a=g.16(f,h);4 b=g.16(h,d);4 c=g.16(f,d);4 w=1s.1X(b*c*1s.1Y(1-(a/(b+c)),2));C[C.v]=w}4 k=0,17=C[0],j=0;1Z(++j<C.v){l(C[j]<17){17=C[j];k=j}}W(k+1)}9 1t(a){l(a.B){l(!7)13();4 b=1r(a.B);Q(a.B,b);7.x().20(b,a.B);K()}}9 1u(){4 g=t.u;4 a={21:E g.1h(22.23,6.24),25:8,26:g.P.1v,27:\'28\',29:\'2a\',2b:J,2c:{2d:[g.P.1v,g.P.2e,g.P.2f]},2g:D,2h:{2i:g.2j.2k}};p=E g.2l(O.14("p"),a);13();g.o.y(p,"1g",1t)}9 2m(){l(7&&7.x().12()>1){4 b=E t.u.2n();7.x().2o(9(a){b.2p(a)});p.2q(b)}}9 2r(){4 g=t.u;A(4 i=0,m;m=q[i];i++){g.o.1j(m);m.L(G)}l(7){A(4 j=0,n;n=7.1m[j];j++){g.o.2s(n)}7.L(G);7=G}q.v=0;O.14("1n").15="&1q;"}11.2t=1u;',62,154,'||||var|||polyShape||function||||||||||||if|||event|map|markers|||google|maps|length||getPath|addListener||for|latLng|list|false|new|drag_poly|null|mouseDownPos|oldVertexPos|true|showValues|setMap||getAt|document|MapTypeId|createMarker|strokeColor|strokeWeight|fillColor|fillOpacity|draggable|return|movePoly|lat|lng|mousemove|window|getLength|setShape|getElementById|innerHTML|computeDistanceBetween|min|path|00F|scale|splice|else|setIcon|break|setAt|click|LatLng|startDrag|clearInstanceListeners|set|mouseUp|listeners|report|geometry|spherical|nbsp|getClosestLine|Math|leftClick|buildMap|ROADMAP|FFF|EEE|Marker|position|icon|crossOnDrag|push|mouseover|mouseout|drag|removeAt|getPosition|returnValue|stop|clearListeners|3355ff|strokeOpacity|335599|Polygon|mousedown|onmouseup|getArray|computeArea|6371|toFixed|km|sup2|sqrt|pow|while|insertAt|center|51|2516|976318|zoom|mapTypeId|draggableCursor|auto|draggingCursor|move|disableDoubleClickZoom|mapTypeControlOptions|mapTypeIds|SATELLITE|TERRAIN|panControl|zoomControlOptions|style|ZoomControlStyle|SMALL|Map|zoomToPoly|LatLngBounds|forEach|extend|fitBounds|clearPoly|removeListener|onload'.split('|'),0,{}))

//]]>
</script>

</body>
</html>
